<template>
	<div class="panel_container">
		<div style="padding: 10px; border: 1px solid #FF0000; height:calc(100vh - 170px); overflow-y: auto;">
			<el-form :model="formData">
				<el-form-item label="热点类型">
					<el-select v-model="formData.type">
						<el-option label="场景切换" value="scene"></el-option>
						<el-option label="图文" value="article"></el-option>
						<el-option label="文本" value="text"></el-option>
						<el-option label="PDF" value="pdf"></el-option>
						<el-option label="视频" value="video"></el-option>
						<el-option label="3D模型" value="model"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="图标设置">
					<div style="width: 100%;">
						<div>
							<el-select v-model="formData.icontype">
								<el-option label="系统图标" value="system"></el-option>
								<el-option label="文字标注" value="text"></el-option>
							</el-select>
						</div>
						<!--系统图标相关设置-->
						<div v-if="formData.icontype=='system'" style="margin-top: 10px;">
							<div style="width:100%; background-color:#000;">
								<div style="text-align: center;padding: 5px;"><img  src="../../assets/sand-icon.png"/></div>
							</div>
							<div style="display: flex; margin-top: 5px;">
								<div style="flex:1; line-height: 25px; color: #989898; font-size: 12px;">官方精选图标库</div>
								<el-button type="primary" size="small" @click="PopupSystemIconLib">选择图标</el-button>
							</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="标注类型">
					<el-select v-model="formData.marktype">
						<el-option label="直线" value="line"></el-option>
						<el-option label="三角形" value="triangle"></el-option>
					</el-select>
				</el-form-item>
				
				
				<el-form-item label="跟随画面进行缩放" label-position="left" label-width="210">
					<el-switch :active-value="true" :inactive-value="false" v-model="formData.distored"></el-switch>
				</el-form-item>
				
				<el-form-item label="标题设置">
					<el-input type="textarea" :rows="4" maxlength="300" show-word-limit placeholder="请输入标题名称"></el-input>
				</el-form-item>
				
				<el-form-item label="显示标题" label-position="left">
					<el-switch :active-value="true" :inactive-value="false" v-model="formData.showtitle"></el-switch>
				</el-form-item>
				
				
				<el-form-item label="目标设置">
					<el-select v-model="formData.targetscene" placeholder="请选择">
						<el-option label="场景1" value="111"></el-option>
						<el-option label="场景2" value="2222"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="测试">
					
					{{panoData}}
					asdfasdfa<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
					asdfasdf<br/>
				</el-form-item>
				

			</el-form>
		</div>
		<div class="footer">
			<div style="padding: 2px 5px;">
				<el-button type="primary" style="width: 100%;" @click="handleSave">完成设置</el-button>
			</div>
			<div style="padding: 2px 5px;">
				<el-button type="info" style="width: 100%;" @click="handleCancel">取消设置</el-button>
			</div>
		</div>
		<SysIconLibUI v-if="sysiconlibVisible" ref="sysIconLibUI"></SysIconLibUI>

	</div>
</template>

<script>
	import SysIconLibUI from '../../components/SysIconLibUI.vue';
	export default {
		props:["panoData"],
		components:{
			SysIconLibUI
		},
		data() {
			return {
				formData:{
					type:"scene",
					distored:true,
					marktype:'line',
					title:'',
					icontype:'system',
					icon:'',
					showtitle:true,
					targetscene:'',
				},
				sysiconlibVisible:false
			}
		},
		methods: {
			handleSave() {
				this.$emit("close");
			},
			handleCancel() {
				this.$emit("complete");
				this.$emit("close");
			},
			PopupSystemIconLib(){
				console.log('show');
				this.sysiconlibVisible=true;
				this.$nextTick(()=>{
					this.$refs.sysIconLibUI.dialogVisible=true;
					this.$refs.sysIconLibUI.init();
				})
			}
		}
	}
</script>

<style scoped>
	.panel_container {
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		position: absolute;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 5px;
		background-color: #333;
		color: #eeeeee;
	}

	.footer {
		position: absolute;
		bottom: 0px;
		text-align: center;
		width: 100%;
	}
</style>